helpers.js ➔ formToSky - Code Metrics - Inspection of "add branch alias" - PiedWeb/CMS - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( 59b92d...81b834 )

by Dev

created 2019-02-01 15:30 UTC

helpers.js ➔ formToSky B

↳ Parent: Project

Complexity

Conditions	2
Paths	2

Size

Total Lines	67
Code Lines	41

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
eloc	41
dl	0
loc	67
rs	8.896
c	1
b	0
f	0
cc	2
nc	2
nop	1

How to fix Long Method

/**
 * List of available function:
 * - formToSky              ajaxify-form
 * - getBlockFromSky        Fetch (ajax) function permitting to get block via a POST request
 * - responsiveImage        Transform image's path (src) produce with Liip to responsive path
 * - convertImgLinkToResponsiveImgLink      Transform link to image produce with Liip to responsive Link
 */

/**
 * Fetch (ajax) function permitting to get block via a POST request
 * (prevent from spam)
 *
 * @param {string} attribute
 */
export function getBlockFromSky(attribute = 'data-sky')
{
    document.querySelectorAll('[' + attribute + ']').forEach(item => {
        fetch(item.getAttribute(attribute), {
            headers: {'Content-Type': 'application/json', Accept: 'text/plain'},
            method: 'POST',
            // Later: maybe implement sending data form data-post
            // body: JSON.stringify({"contact": (document.getElementById("contact") !== null ? 1: 0)}),
            credentials: 'same-origin',
        })
            .then(function (response) {
                return response.text();
            })
            .then(function (body) {
                item.removeAttribute('data-sky');
                item.innerHTML = body;

                // add export function to reDo on document dom ready
                if (typeof onPageLoaded === 'function') {
                    onPageLoaded();
                }
                if (typeof onDomLoaded === 'function') {
                    onDomLoaded();
                }
            });
    });
}

/**
 * ajaxify-form
 */
export function formToSky(userOptions = {})
{
    var options = {
        selector: '.ajax-form', // selector for ajax form
    };
    for (var attrname in userOptions) {
        options[attrname] = userOptions[attrname];
    }

    document.querySelectorAll(options.selector).forEach(item => {
        if (item.querySelector('form') !== null) {
            item.querySelector('form').addEventListener('submit', e => {
                e.preventDefault();
                sendFormToSky(e);
            });
        }
    });

    var sendFormToSky = function (form) {
        var $submitButton = getSubmitButton(form);
        if ($submitButton !== null) {
            var initialButton = getSubmitButton(form).outerHTML;
            $submitButton.outerHTML = '<i class="fa fa-spinner fa-spin"></i>';
        }

        //var formData = new FormData();
        var toSend = '';
        for (var i = 0; i < form.srcElement.length; ++i) {
            toSend +=
                encodeURI(form.srcElement[i].name) +
                '=' +
                encodeURI(form.srcElement[i].value) +
                '&';
        }

        var xmlhttp = new XMLHttpRequest();
        xmlhttp.addEventListener(
            'load',
            function () {
                form.srcElement.outerHTML = xmlhttp.responseText;
                formToSky();
            },
            false,
        );
        xmlhttp.open('POST', form.srcElement.action, false);
        xmlhttp.setRequestHeader(
            'Content-type',
            'application/x-www-form-urlencoded',
        );
        xmlhttp.send(toSend);
    };

    var renderError = function (error) {
        var msg = '';
        for (var key in error) {
            if (error.hasOwnProperty(key)) {
                var obj = error[key];
                for (var prop in obj) {
                    if (obj.hasOwnProperty(prop)) {
                        msg += key + ' : ' + obj[prop] + '<br>';
                    }
                }
            }
        }
        return msg;
    };

    var getSubmitButton = function (form) {
        if (form.srcElement.querySelector('[type=submit]') !== null) {
            return form.srcElement.querySelector('[type=submit]');
        }
        if (form.srcElement.getElementsByTagName('button') !== null) {
            return form.srcElement.getElementsByTagName('button');
        }
        return null;
    };
}

/**
 * Transform image's path (src) produce with Liip to responsive path
 *
 * @param {string} src
 */
export function responsiveImage(src)
{
    var screenWidth = document.clientWidth;
    if (screenWidth <= 576) {
        src = src.replace('/default/', '/xs/');
    } else if (screenWidth <= 768) {
        bg_src = src.replace('/default/', '/sm/');
    } else if (screenWidth <= 992) {
        bg_src = src.replace('/default/', '/md/');
    } else if (screenWidth <= 1200) {
        src = src.replace('/default/', '/lg/');
    } else {
        // 1200+
        src = src.replace('/default/', '/xl/');
    }

    return src;
}

/**
 * Transform link to image produce with Liip to responsive Link
 *
 * @param {string} attribute
 *
 * @example
 * <a href="/monImage/uneimage.png" data-rimg>
 * <a href="monimageopti.png">
 */
export function convertImgLinkToResponsiveImgLink(attribute = 'data-rimg')
{
    var test = [];
    if (typeof test.push === 'function') {
        // to avoid gooogle bot execute
        [].forEach.call(
            document.querySelectorAll('[' + attribute + ']'),
            function (element) {
                element.removeAttribute(attribute);
                var href = element.getAttribute(href);
                element.setAttribute('href', responsiveImage(href));
            },
        );
    }
}


1			/**
2			* List of available function:
3			* - formToSky ajaxify-form
4			* - getBlockFromSky Fetch (ajax) function permitting to get block via a POST request
5			* - responsiveImage Transform image's path (src) produce with Liip to responsive path
6			* - convertImgLinkToResponsiveImgLink Transform link to image produce with Liip to responsive Link
7			*/
8
9			/**
10			* Fetch (ajax) function permitting to get block via a POST request
11			* (prevent from spam)
12			*
13			* @param {string} attribute
14			*/
15			export function getBlockFromSky(attribute = 'data-sky')
16			{
17			document.querySelectorAll('[' + attribute + ']').forEach(item => {
18			fetch(item.getAttribute(attribute), {
19			headers: {'Content-Type': 'application/json', Accept: 'text/plain'},
20			method: 'POST',
21			// Later: maybe implement sending data form data-post
22			// body: JSON.stringify({"contact": (document.getElementById("contact") !== null ? 1: 0)}),
23			credentials: 'same-origin',
24			})
25			.then(function (response) {
26			return response.text();
27			})
28			.then(function (body) {
29			item.removeAttribute('data-sky');
30			item.innerHTML = body;
31
32			// add export function to reDo on document dom ready
33			if (typeof onPageLoaded === 'function') {
34			onPageLoaded();
35			}
36			if (typeof onDomLoaded === 'function') {
37			onDomLoaded();
38			}
39			});
40			});
41			}
42
43			/**
44			* ajaxify-form
45			*/
46			export function formToSky(userOptions = {})
47			{
48			var options = {
49			selector: '.ajax-form', // selector for ajax form
50			};
51			for (var attrname in userOptions) {
52			options[attrname] = userOptions[attrname];
53			}
54
55			document.querySelectorAll(options.selector).forEach(item => {
56			if (item.querySelector('form') !== null) {
57			item.querySelector('form').addEventListener('submit', e => {
58			e.preventDefault();
59			sendFormToSky(e);
60			});
61			}
62			});
63
64			var sendFormToSky = function (form) {
65			var $submitButton = getSubmitButton(form);
66			if ($submitButton !== null) {
67			var initialButton = getSubmitButton(form).outerHTML;
68			$submitButton.outerHTML = '<i class="fa fa-spinner fa-spin"></i>';
69			}
70
71			//var formData = new FormData();
72			var toSend = '';
73			for (var i = 0; i < form.srcElement.length; ++i) {
74			toSend +=
75			encodeURI(form.srcElement[i].name) +
76			'=' +
77			encodeURI(form.srcElement[i].value) +
78			'&';
79			}
80
81			var xmlhttp = new XMLHttpRequest();
82			xmlhttp.addEventListener(
83			'load',
84			function () {
85			form.srcElement.outerHTML = xmlhttp.responseText;
86			formToSky();
87			},
88			false,
89			);
90			xmlhttp.open('POST', form.srcElement.action, false);
91			xmlhttp.setRequestHeader(
92			'Content-type',
93			'application/x-www-form-urlencoded',
94			);
95			xmlhttp.send(toSend);
96			};
97
98			var renderError = function (error) {
99			var msg = '';
100			for (var key in error) {
101			if (error.hasOwnProperty(key)) {
102			var obj = error[key];
103			for (var prop in obj) {
104			if (obj.hasOwnProperty(prop)) {
105			msg += key + ' : ' + obj[prop] + '<br>';
106			}
107			}
108			}
109			}
110			return msg;
111			};
112
113			var getSubmitButton = function (form) {
114			if (form.srcElement.querySelector('[type=submit]') !== null) {
115			return form.srcElement.querySelector('[type=submit]');
116			}
117			if (form.srcElement.getElementsByTagName('button') !== null) {
118			return form.srcElement.getElementsByTagName('button');
119			}
120			return null;
121			};
122			}
123
124			/**
125			* Transform image's path (src) produce with Liip to responsive path
126			*
127			* @param {string} src
128			*/
129			export function responsiveImage(src)
130			{
131			var screenWidth = document.clientWidth;
132			if (screenWidth <= 576) {
133			src = src.replace('/default/', '/xs/');
134			} else if (screenWidth <= 768) {
135			bg_src = src.replace('/default/', '/sm/');
136			} else if (screenWidth <= 992) {
137			bg_src = src.replace('/default/', '/md/');
138			} else if (screenWidth <= 1200) {
139			src = src.replace('/default/', '/lg/');
140			} else {
141			// 1200+
142			src = src.replace('/default/', '/xl/');
143			}
144
145			return src;
146			}
147
148			/**
149			* Transform link to image produce with Liip to responsive Link
150			*
151			* @param {string} attribute
152			*
153			* @example
154			* <a href="/monImage/uneimage.png" data-rimg>
155			* <a href="monimageopti.png">
156			*/
157			export function convertImgLinkToResponsiveImgLink(attribute = 'data-rimg')
158			{
159			var test = [];
160			if (typeof test.push === 'function') {
161			// to avoid gooogle bot execute
162			[].forEach.call(
163			document.querySelectorAll('[' + attribute + ']'),
164			function (element) {
165			element.removeAttribute(attribute);
166			var href = element.getAttribute(href);
167			element.setAttribute('href', responsiveImage(href));
168			},
169			);
170			}
171			}
172

PiedWeb / CMS

Push — master ( 59b92d...81b834 )

helpers.js ➔ formToSky B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like